<template>
    <div>
      <ul>
        <li v-for="(product, index) in products" :key="index">
          {{ product.name }} - ${{ product.price }}
          <button @click="addToCart(product)">Add to Cart</button>
        </li>
      </ul>
      
      <h2>Cart</h2>
      <ul>
        <li v-for="(product, index) in cart" :key="index">
          {{ product.name }} - ${{ product.price }}
          <button @click="removeFromCart(index)">Remove from Cart</button>
        </li>
      </ul>
      
      <p>Total: ${{ total }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        products: [
          { name: 'Product 1', price: 10 },
          { name: 'Product 2', price: 15 },
          { name: 'Product 3', price: 20 }
        ]
      }
    },
    computed: {
      cart() {
        return this.$store.state.cart
      },
      total() {
        return this.$store.getters.totalPrice
      }
    },
    methods: {
      addToCart(product) {
        this.$store.commit('addToCart', product)
      },
      removeFromCart(index) {
        this.$store.commit('removeFromCart', index)
      }
    }
  }
  </script>